<template>
  <div class="m-mask-wrapper">
    <div v-if="readonly" class="m-mask"></div>
    <el-select style="width: 100%" :class="{ readonly: readonly }" :value="value" :placeholder="placeholder" :size="size" :disabled="disabled" :clearable="clearable" @change="handleChange">
      <el-option v-for="item in options" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]"> </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'MSelect',
  props: {
    value: {
      type: [String, Number, Array],
    },
    placeholder: {
      type: String,
      default: 'Por favor elige',
    },
    options: {
      type: Array,
      default: () => [],
    },
    labelKey: {
      type: String,
      default: 'dictLable',
    },
    valueKey: {
      type: String,
      default: 'dictKey',
    },
    size: {
      type: String,
      default: 'small',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    handleChange(val) {
      this.$emit('input', val)
      this.$emit('change', val)
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input.is-disabled {
    .el-input__inner {
      background-color: #ffffff;
      color: #606266;
    }
  }
  .el-select.readonly {
    .el-input__inner {
      border: none;
      padding-left: 0;
      margin-top: -4px;
      background-color: transparent;
      cursor: not-allowed;
    }
    .el-input__suffix-inner {
      display: none;
    }
  }
}
</style>
